<template>
  <div>
    <a-card title="中间件总体性能状态" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <a-row>
        <a-col :xl="14" :lg="12" :md="12" :sm="24" :xs="24">
          <mixline-chart id="database" :opiton="optionDatabase" style="width:100%; height:180px; overflow: hidden;"></mixline-chart>
        </a-col>
        <a-col :xl="10" :lg="12" :md="12" :sm="24" :xs="24">
          <ve-radar :data="statisticsData" :extend="radarExtend" height="200px"></ve-radar>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import mixlineChart from './mixlineChart'
export default {
  name: 'PerformStatus',
  components: {
    mixlineChart
  },
  data () {
    return {
      optionDatabase: {
        title: {
          text: '数据库',
          x: 'center',
          y: '20px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#999'// 主标题文字颜色
          }
        },
        legend: {
          data: [ 'TPS', 'IOPS' ],
          x: 'center',
          y: '0',
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' }
        },
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
          }
        ],
        grid: [{
            left: '10%',
            right: '10%',
            top: 30,
            height: '22%'
        }, {
            left: '10%',
            right: '10%',
            top: '60%',
            height: '22%'
        }],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: [
              '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00', '2009/6/12 16:00', '2009/6/12 17:00', '2009/6/12 18:00', '2009/6/12 19:00', '2009/6/12 20:00', '2009/6/12 21:00', '2009/6/12 22:00', '2009/6/12 23:00',
              '2009/6/13 0:00', '2009/6/13 1:00', '2009/6/13 2:00', '2009/6/13 3:00', '2009/6/13 4:00', '2009/6/13 5:00', '2009/6/13 6:00', '2009/6/13 7:00', '2009/6/13 8:00', '2009/6/13 9:00', '2009/6/13 10:00', '2009/6/13 11:00', '2009/6/13 12:00', '2009/6/13 13:00', '2009/6/13 14:00', '2009/6/13 15:00', '2009/6/13 16:00', '2009/6/13 17:00', '2009/6/13 18:00', '2009/6/13 19:00', '2009/6/13 20:00', '2009/6/13 21:00', '2009/6/13 22:00', '2009/6/13 23:00',
              '2009/6/14 0:00', '2009/6/14 1:00', '2009/6/14 2:00', '2009/6/14 3:00', '2009/6/14 4:00', '2009/6/14 5:00', '2009/6/14 6:00', '2009/6/14 7:00', '2009/6/14 8:00', '2009/6/14 9:00', '2009/6/14 10:00', '2009/6/14 11:00', '2009/6/14 12:00', '2009/6/14 13:00', '2009/6/14 14:00', '2009/6/14 15:00', '2009/6/14 16:00', '2009/6/14 17:00', '2009/6/14 18:00', '2009/6/14 19:00', '2009/6/14 20:00', '2009/6/14 21:00', '2009/6/14 22:00', '2009/6/14 23:00',
              '2009/6/15 0:00', '2009/6/15 1:00', '2009/6/15 2:00', '2009/6/15 3:00', '2009/6/15 4:00', '2009/6/15 5:00', '2009/6/15 6:00', '2009/6/15 7:00', '2009/6/15 8:00', '2009/6/15 9:00', '2009/6/15 10:00', '2009/6/15 11:00', '2009/6/15 12:00', '2009/6/15 13:00', '2009/6/15 14:00', '2009/6/15 15:00', '2009/6/15 16:00', '2009/6/15 17:00', '2009/6/15 18:00', '2009/6/15 19:00', '2009/6/15 20:00', '2009/6/15 21:00', '2009/6/15 22:00', '2009/6/15 23:00',
              '2009/6/15 0:00', '2009/6/16 1:00', '2009/6/16 2:00', '2009/6/16 3:00', '2009/6/16 4:00', '2009/6/16 5:00', '2009/6/16 6:00', '2009/6/16 7:00', '2009/6/16 8:00', '2009/6/16 9:00', '2009/6/16 10:00', '2009/6/16 11:00', '2009/6/16 12:00', '2009/6/16 13:00', '2009/6/16 14:00', '2009/6/16 15:00', '2009/6/16 16:00', '2009/6/16 17:00', '2009/6/16 18:00', '2009/6/16 19:00', '2009/6/16 20:00', '2009/6/16 21:00', '2009/6/16 22:00', '2009/6/16 23:00'
            ].map(function (str) {
                return str.replace('2009/', '')
            })
          },
          {
            gridIndex: 1,
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: [
              '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00', '2009/6/12 16:00', '2009/6/12 17:00', '2009/6/12 18:00', '2009/6/12 19:00', '2009/6/12 20:00', '2009/6/12 21:00', '2009/6/12 22:00', '2009/6/12 23:00',
              '2009/6/13 0:00', '2009/6/13 1:00', '2009/6/13 2:00', '2009/6/13 3:00', '2009/6/13 4:00', '2009/6/13 5:00', '2009/6/13 6:00', '2009/6/13 7:00', '2009/6/13 8:00', '2009/6/13 9:00', '2009/6/13 10:00', '2009/6/13 11:00', '2009/6/13 12:00', '2009/6/13 13:00', '2009/6/13 14:00', '2009/6/13 15:00', '2009/6/13 16:00', '2009/6/13 17:00', '2009/6/13 18:00', '2009/6/13 19:00', '2009/6/13 20:00', '2009/6/13 21:00', '2009/6/13 22:00', '2009/6/13 23:00',
              '2009/6/14 0:00', '2009/6/14 1:00', '2009/6/14 2:00', '2009/6/14 3:00', '2009/6/14 4:00', '2009/6/14 5:00', '2009/6/14 6:00', '2009/6/14 7:00', '2009/6/14 8:00', '2009/6/14 9:00', '2009/6/14 10:00', '2009/6/14 11:00', '2009/6/14 12:00', '2009/6/14 13:00', '2009/6/14 14:00', '2009/6/14 15:00', '2009/6/14 16:00', '2009/6/14 17:00', '2009/6/14 18:00', '2009/6/14 19:00', '2009/6/14 20:00', '2009/6/14 21:00', '2009/6/14 22:00', '2009/6/14 23:00',
              '2009/6/15 0:00', '2009/6/15 1:00', '2009/6/15 2:00', '2009/6/15 3:00', '2009/6/15 4:00', '2009/6/15 5:00', '2009/6/15 6:00', '2009/6/15 7:00', '2009/6/15 8:00', '2009/6/15 9:00', '2009/6/15 10:00', '2009/6/15 11:00', '2009/6/15 12:00', '2009/6/15 13:00', '2009/6/15 14:00', '2009/6/15 15:00', '2009/6/15 16:00', '2009/6/15 17:00', '2009/6/15 18:00', '2009/6/15 19:00', '2009/6/15 20:00', '2009/6/15 21:00', '2009/6/15 22:00', '2009/6/15 23:00',
              '2009/6/15 0:00', '2009/6/16 1:00', '2009/6/16 2:00', '2009/6/16 3:00', '2009/6/16 4:00', '2009/6/16 5:00', '2009/6/16 6:00', '2009/6/16 7:00', '2009/6/16 8:00', '2009/6/16 9:00', '2009/6/16 10:00', '2009/6/16 11:00', '2009/6/16 12:00', '2009/6/16 13:00', '2009/6/16 14:00', '2009/6/16 15:00', '2009/6/16 16:00', '2009/6/16 17:00', '2009/6/16 18:00', '2009/6/16 19:00', '2009/6/16 20:00', '2009/6/16 21:00', '2009/6/16 22:00', '2009/6/16 23:00'
            ].map(function (str) {
                return str.replace('2009/', '')
            }),
            position: 'top'
          }
        ],
        yAxis: [
          {
            name: 'TPS(m^3/s)',
            type: 'value',
            splitLine: { // 网格线
              lineStyle: {
                color: ['#555'],
                width: 1,
                type: 'dashed'// 设置网格线类型 dotted：虚线solid:实线
              },
              show: true // 隐藏或显示
            },
            max: 500
          },
          {
            gridIndex: 1,
            name: 'IOPS(mm)',
            type: 'value',
            splitLine: { // 网格线
              lineStyle: {
                color: ['#555'],
                width: 1,
                type: 'dashed'// 设置网格线类型 dotted：虚线solid:实线
              },
              show: true // 隐藏或显示
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // x轴字体颜色
              }
            },
            inverse: true
          }
        ],
        series: [
          {
            name: 'TPS',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: [
              0.97, 0.96, 0.96, 0.95, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.97, 0.96, 0.96, 0.95, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.97, 0.96, 0.96, 0.95, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94
            ]
          },
          {
            name: 'IOPS',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: [
              0, 0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0.99, 0, 0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0.99, 0, 0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0.99, 0, 0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0.99, 0, 0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0.99
            ]
          }
        ]
      },
      chartExtend: {
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        }
      },
      radarExtend: {
        title: {
          // text: '系统资源',
          x: 'center',
          y: '-5px',
          textStyle: {
            fontSize: 14,
            color: '#333'// 主标题文字颜色
          }
        },
        radar: {
          splitArea: {
            show: false
          },
          splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#d9d9d9',
              // 分隔线颜色
              width: 1
              // 分隔线线宽
            }
          },
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#999',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid'
              // 坐标轴线线的类型。
            }
          },
          shape: 'circle',
          center: ['50%', '50%'],
          radius: 50
        },
        series: {
          tooltip: {
            trigger: 'item'
          },
          areaStyle: { // 单项区域填充样式
            normal: {
              color: 'rgba(255,0,0,0.6)' // 填充的颜色。[ default: "#000" ]
            }
          }
        }
      },
      statisticsData: {
        columns: ['渠道', 'PV', 'TPS', 'ResponseTime', 'QPS'],
        rows: [
          { '渠道': '统计情况', 'PV': 1393, 'TPS': 1093, 'ResponseTime': 32, 'QPS': 132 }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // this.getalArmHandleRate()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 相应处置率
     */
    getalArmHandleRate () {
      // 告警处置率
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
